{% extends 'base.html' %}
{% load static %}

{% block title %}定位螺丝 - 机械臂实验系统{% endblock %}

{% block content %}
<div class="container py-4">
    <h2 class="mb-4">步骤1：定位螺丝</h2>
    
    <div class="alert alert-info">
        <h5>操作指南</h5>
        <p>在此步骤中，您需要通过拖动整个机械臂移动到目标螺丝位置。</p>
        <ul>
            <li>机械臂的前端套筒部分是朝下的，但不会触碰到桌面</li>
            <li>使用虚拟控制器拖动整个机械臂</li>
            <li>将机械臂移动到位置，直到前端套筒部分悬停在螺丝钉上方才算通过</li>
            <li>完成定位后点击提交按钮进入下一步</li>
        </ul>
    </div>
    
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">定位螺丝操作</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div style="background-color: #333; height: 400px; position: relative; border-radius: 5px;">
                        <img src="{% static 'img/stock/industry-machines-factory.jpg' %}" 
                             alt="定位螺丝" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px dashed #fff; width: 100px; height: 100px; border-radius: 50%;"></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">控制面板</h5>
                    
                    <div class="mb-3">
                        <label class="form-label">当前位置</label>
                        <div class="d-flex justify-content-between mb-2">
                            <span>X: 245mm</span>
                            <span>Y: 180mm</span>
                            <span>Z: 300mm</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">方向控制</label>
                        <div class="d-flex justify-content-center mb-2">
                            <button class="btn btn-outline-secondary mx-1">↑</button>
                        </div>
                        <div class="d-flex justify-content-center mb-2">
                            <button class="btn btn-outline-secondary mx-1">←</button>
                            <button class="btn btn-outline-secondary mx-1">↓</button>
                            <button class="btn btn-outline-secondary mx-1">→</button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">高度控制</label>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-outline-secondary mx-1">+</button>
                            <button class="btn btn-outline-secondary mx-1">-</button>
                        </div>
                    </div>
                    
                    <form method="post" action="{% url 'experiment_step' experiment.id step %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-primary w-100 mt-3">确认定位完成</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-flex justify-content-between">
        <a href="{% url 'experiment_platform' %}" class="btn btn-secondary">返回实验平台</a>
    </div>
</div>
{% endblock %} 